<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">




function test(){

        var html="<table>"+
                    "<tr>"+
                        "<td>"+
                        "<fmt:message key='forms.color.name' />"+
                        "</td>"+
                        "<td>"+
                            "<input class='required' type='text' name='colorName0' value='' />"+
                        "</td>"+
                    "</tr>"+
                    "<tr>"+
                        "<td>"+
                            "<fmt:message key='forms.color.description' />"+
                        "</td>"+
                        "<td>"+
                            "<input class='required' type='text' name='colorDescription0' value='' />"+
                        "</td>"+
                    "</tr>"+
                    "<tr>"+
                        "<td>"+
                            "<fmt:message key='forms.color' />"+
                        "</td>"+
                        "<td>"+
                            "<p>"+
                                "<input class='colorPickerField required' type='text' maxlength='6' size='6' id='colorpickerField0' value='00ff00' />"+
                                "<img class='add'  id='icon0' src='jsp/images/Add.png' width='25' height='25' style='padding-left: 10px;display:block;float:right' alt='Add'  />"+

                                "<span class='squareColor' id='squareColor' style='display:block;width:25px;height:25px;background-color:yellow;float:right' />"+
                            "</p>"+
                        "</td>"+
                    "</tr>"+
                "</table>";




var dinamicHtml = {
     "classOnClick": "click",
     "innerHtml": html,
     "addBefore": true,
     "firstId": 1,
     "idsToModify": [
       {
           "originalId": "colorName0",
           "newId": "colorName"
       },
       {
           "originalId": "colorDescription0",
           "newId": "colorDescription"
       },
       {
           "originalId": "colorpickerField0",
           "newId": "colorpickerField"
       },
       {
           "originalId": "icon0",
           "newId": "icon"
       },
       {
           "originalId": "squareColor0",
           "newId": "squareColor"
       }
     ]
};
  replaceDinamiclyIds(dinamicHtml);

}


function replaceDinamiclyIds(dinamicHtml){
    alert(dinamicHtml.innerHtml)
    for(i = 0; i< dinamicHtml.idsToModify.length; i++){
        dinamicHtml.innerHtml = dinamicHtml.innerHtml.replace(dinamicHtml.idsToModify[i].originalId ,dinamicHtml.idsToModify[i].newId + dinamicHtml.firstId);
    }
    dinamicHtml.firstId++;
    alert(dinamicHtml.innerHtml)
   
    return dinamicHtml;
}






    </script>



  </head>
  <body onunload="test()">
      <input class="click" type="submit" value="ClickaAquí" />
  </body>




</html>
